<script setup lang="ts">
import { ref } from 'vue';

const publicShare = ref(false);
const storyTheme = ref('');

const handleUpload = () => {
  // TODO: 实现文件上传或拍摄功能
};

const generateStory = () => {
  // TODO: 实现AI故事生成功能
};

const myCreations = [
  {
    title: '神奇的树屋',
    date: '2024-01-20',
    image: 'https://images.unsplash.com/photo-1741290606668-c367b34d3d4a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3'
  },
  {
    title: '月亮上的小屋',
    date: '2024-01-18',
    image: 'https://images.unsplash.com/photo-1658238134097-ee857daef354?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3'
  }
];
</script>

<template>
  <div class="container mx-auto px-4 py-8">
    <!-- 创作选项 -->
    <div class="grid grid-cols-1 gap-6 mb-8">
      <!-- OCR扫描创作 -->
      <div class="bg-white/80 backdrop-blur-md rounded-2xl p-6 shadow-lg">
        <div class="flex items-center mb-4">
          <img src="https://unpkg.com/lucide-static@latest/icons/scan.svg" class="w-8 h-8 mr-3 text-purple-600" alt="扫描">
          <h2 class="text-xl font-bold">画作扫描</h2>
        </div>
        <p class="text-gray-600 mb-4">将你的画作变成精彩的童话故事</p>
        <div class="border-2 border-dashed border-purple-200 rounded-xl p-8 text-center cursor-pointer hover:border-purple-400 transition-colors" @click="handleUpload">
          <img src="https://unpkg.com/lucide-static@latest/icons/upload.svg" class="w-12 h-12 mx-auto mb-3 text-purple-400" alt="上传">
          <p class="text-purple-600">点击上传或拍摄画作</p>
        </div>
      </div>

      <!-- AI故事生成 -->
      <div class="bg-white/80 backdrop-blur-md rounded-2xl p-6 shadow-lg">
        <div class="flex items-center mb-4">
          <img src="https://unpkg.com/lucide-static@latest/icons/sparkles.svg" class="w-8 h-8 mr-3 text-purple-600" alt="AI">
          <h2 class="text-xl font-bold">AI故事生成</h2>
        </div>
        <p class="text-gray-600 mb-4">输入关键词，AI为你创作独特的童话故事</p>
        <div class="space-y-4">
          <input v-model="storyTheme" type="text" placeholder="输入故事主题、人物或场景" class="w-full p-3 rounded-xl bg-white/50 border border-purple-100 focus:outline-none focus:border-purple-300">
          <div class="flex flex-wrap gap-2">
            <span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm cursor-pointer hover:bg-purple-200">魔法森林</span>
            <span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm cursor-pointer hover:bg-purple-200">小精灵</span>
            <span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm cursor-pointer hover:bg-purple-200">冒险</span>
            <span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm cursor-pointer hover:bg-purple-200">友情</span>
          </div>
          <div class="flex justify-between items-center">
            <div class="flex items-center">
              <input v-model="publicShare" type="checkbox" id="public" class="mr-2">
              <label for="public" class="text-sm text-gray-600">公开分享</label>
            </div>
            <button @click="generateStory" class="bg-purple-600 text-white px-6 py-2 rounded-xl hover:bg-purple-700 transition-colors">开始创作</button>
          </div>
        </div>
      </div>

      <!-- 我的创作 -->
      <div class="bg-white/80 backdrop-blur-md rounded-2xl p-6 shadow-lg">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-bold">我的创作</h2>
          <span class="text-purple-600 text-sm cursor-pointer">查看全部</span>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div v-for="creation in myCreations" :key="creation.title" class="bg-white rounded-xl p-3 shadow">
            <img :src="creation.image" :alt="creation.title" class="w-full h-32 object-cover rounded-lg mb-2">
            <h3 class="font-semibold text-sm mb-1">{{ creation.title }}</h3>
            <p class="text-xs text-gray-500">创作于 {{ creation.date }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>